import { createSlice } from "@reduxjs/toolkit";
import {
  DashboardOutlined,
  TeamOutlined,
  UserOutlined,
  SettingOutlined
} from '@ant-design/icons';
import DashBoard from "@p/DashBoard";
import NowPage from '@p/NowPage'
import WantPage from '@p/WantPage'
import EndPage from '@p/EndPage'
import StudyAdd from '@p/StudyAdd'
import StudyUpdate from '@p/StudyUpdate'
import UserInfo from '@p/UserInfo'
import Setting from '@p/SettingPage'
const initialState = {
  userInfo:
    localStorage.getItem('userInfo')
      ?
      JSON.parse(localStorage.getItem('userInfo'))
      :
      {}
  ,
  token: localStorage.getItem('token') || '',
  role: localStorage.getItem('role') || '',
  menus: [
    {
      key: '/dashBoard',
      label: '仪表盘',
      title: '仪表盘',
      roles: '*',
      icon: <DashboardOutlined />
    },
    {
      key: 'items',
      label: '商品管理',
      title: '商品管理',
      roles: ['a', 'b', 'admin'],
      icon: <TeamOutlined />,
      children: [
        {
          label: '在学学员',
          key: '/nowPage',
          roles: ['a', 'b', 'admin'],
          title: '在学学员'
        },
        {
          label: '意向学员',
          title: '意向学员',
          roles: ['a', 'b', 'admin'],
          key: '/wantPage'
        },
        {
          label: '结业学员',
          title: '结业学员',
          roles: ['a', 'b', 'admin'],
          key: '/endPage'
        }
      ]
    },
    {
      key: '/userInfo',
      label: '个人中心',
      roles: ['a', 'b', 'admin'],
      title: '个人中心',
      icon: <UserOutlined />
    },
    {
      key: '/setting',
      label: '设置',
      roles: ['a', 'b'],
      title: '设置',
      icon: <SettingOutlined />
    }
  ],
  authRoutes: [
    {
      path: '/dashBoard',
      name: '仪表盘',
      roles: '*',
      element: DashBoard
    },
    {
      path: '/nowPage',
      name: '在学学员',
      roles: ['a', 'b', 'admin'],
      element: NowPage
    },
    {
      path: '/wantPage',
      name: '意向学员',
      roles: ['a', 'b', 'admin'],
      element: WantPage
    },
    {
      path: '/endPage',
      name: '结业学员',
      roles: ['a', 'b', 'admin'],
      element: EndPage
    },
    {
      path: '/studyAdd',
      name: '新增学员',
      roles: ['a', 'b', 'admin'],
      element: StudyAdd
    },
    {
      path: '/studyUpdate/:id',
      name: '修改学员信息',
      roles: ['a', 'b', 'admin'],
      element: StudyUpdate
    },
    {
      path: '/userInfo',
      name: '个人中心',
      roles: ['a', 'b', 'admin'],
      element: UserInfo
    },
    {
      path: '/setting',
      name: '设置',
      roles: ['a', 'b'],
      element: Setting
    }
  ]
}
const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    initUser(state, action) {
      const { userInfo, token, role } = action.payload;
      state.userInfo = userInfo;
      state.role = role;
      state.token = token;
    },
    filterAuth(state) {
      const role = state.role;
      let authMenus = [];
      state.menus.forEach(menu => {
        if (menu.roles === '*' || menu.roles.includes(role)) {
          if (menu.children) {
            let subMenus = [];
            subMenus = menu.children.filter(subMenu => (
              subMenu.roles === '*' || subMenu.roles.includes(role)
            ))
            menu.children = subMenus
          }
          authMenus.push(menu);
        }
      })
      state.menus = authMenus;
      state.authRoutes = state.authRoutes.filter(route => (
        route.roles === '*' || route.roles.includes(role)
      ))
    }
  }
})

export const { initUser, filterAuth } = userSlice.actions;
export default userSlice.reducer;